<template>
  <div>
  <!-- //6)	请结合图一输出数组的内容（5分） -->
  <ul>
    <li v-for="item in info" :key="item.name">
      姓名：{{item.name}}<br>年龄：{{item.age}}</li>
  </ul>


  <!-- 1)	请使用合适的函数遍历对象数组（5分） -->
  <!-- 9)	结合图二循环输出对象数组内的信息（5分） -->
  <!--11)	结合图三，选择合适的内置函数实现效果（5分）  -->
  <table border="1">
    <thead>
      <tr style="background-color: aqua;">
        <td>用户借款编号</td>
        <td>借款用户账号</td>
        <td>借款款项名称</td>
        <td>借款金额</td>
        <td>剩余还款本金</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in shuju" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.zhanghao}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.price2}}</td>
      </tr>
    </tbody>
  </table>
<!-- 10)	在页面内定义一个常量，并赋值“双向数据绑定演示”（5分） -->
<!-- 19)	添加有效注释至少10条（5分） -->
<input type="text" v-model="s">
<input type="text" v-model="s">



  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
//4)	在页面内定义一个数组，结合图一添加相应数据（5分）
const info=ref([
  {
    name: "张三",
    age: 18,
  },
  {
    name: "李四",
    age: 19,
  },
  {
    name: "王五",
    age: 20,
  },
  {
    name: "赵六",
    age: 21,
  }
])
//7)	在页面内添加一个对象数组，结合图二添加对应的数据（
const shuju=ref([
  {
    id:1,
    zhanghao:"zhangsan",
    name: "八维助学金",
    price:400,
    price2:0,
  },
  { id:2,
    zhanghao:"zhangsan",
    name: "八维助学金",
    age: 19,
    price:10000,
    price2:10000
  }
])

const s=ref("双向数据演示")

</script>

<style scoped>

</style>